<template>
  <view>
    <statusBar></statusBar>
    <uni-nav-bar left-icon="back" title="成绩分析"></uni-nav-bar>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
    </view>
    <view class="content">
      <view v-show="current === 0">
        <view style="height:10px;background-color: #f2f2f2;"></view>
        <view class="chartstitle">个人错题科目分布比例</view>
        <view class="qiun-charts">
          <!--#ifdef H5-->
          <canvas
            canvasId="canvasPie"
            class="charts"
            :style="{
              width: cWidth * pixelRatio + 'px',
              height: cHeight * pixelRatio + 'px',
              transform: 'scale(' + 1 / pixelRatio + ')',
              'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
              'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px'
            }"
          ></canvas>
          <!--#endif-->
          <!--#ifndef H5-->
          <canvas canvasId="canvasPie" class="charts"></canvas>
          <!--#endif-->
        </view>
      </view>
      <view v-show="current === 1">
        <view class="listab">
        	<view class="listhead list">
        		<view class="listname">考试名称</view>
            <view class="listtime">考试时间</view>
            <view class="listscore">考试得分</view>
        	</view>
          <view class="list" v-for="(item,index) in finishExamList" :key="index">
          	<view class="listname">{{item.ExamName}}</view>
            <view class="listtime">{{item.dateOne}} <br> {{item.dateTwo}}</view>
            <view class="listscore">{{item.score}}</view>
          </view>
        </view>
      </view>
      <view v-show="current === 2">
        <view class="listab">
        	<view class="listhead list">
        		<view class="listnames">考试名称</view>
            <view class="listtime">考试时间</view>
            <view class="listscores">考试得分</view>
            <view class="listtool">操作</view>
        	</view>
          <view class="list" v-for="(item,index) in liveList" :key="index">
          	<view class="listnames">{{item.ExamName}}</view>
            <view class="listtime">{{item.dateOne}} <br> {{item.dateTwo}}</view>
            <view class="listscores">{{item.Score}}</view>
            <view class="listtool"><button @click="showLive(item.RecordPath)">试听</button></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import statusBar from "@/components/status-bar.vue"
import wxCharts from '@/components/wx-charts/wxcharts.js';
var _self;
var canvaColumn = null;
//这里的Data为测试使用，生产环境请从服务器获取
var Data = {
  Pie:{series:[]},
};
export default {
  components: {
    uniSegmentedControl,
    statusBar
  },
  data() {
    return {
      items: ['试题分析', '历次笔试成绩', '现场考试成绩'],
      activeIndex: -1,
      current: 0,
      styleType: 'text',
      activeColor: '#27B28B',
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      finishExamList: [],
      liveList: [],
      PieData: {
        series: []
      },
    };
  },
  onLoad() {
    _self = this;
    //#ifdef H5
    uni.getSystemInfo({
      success: function(res) {
        if (res.pixelRatio > 1) {
          _self.pixelRatio = 2;
          //正常这里_self.pixelRatio给2就行，如果要求高可用下行
          //_self.pixelRatio =res.pixelRatio;
        }
      }
    });
    //#endif
    this.cWidth = uni.upx2px(750);
    this.cHeight = uni.upx2px(500);
  },
  onReady() {
    uni.request({
      method: 'GET',
      header: {
        'Content-Type': 'application/json',
        'Authorization': uni.getStorageSync('token')
      },
      url: this.apiUrl + 'api/student/result/GetWrongScale', 
      data: {},
      success: res => {
        //console.log(res);
        if(res.statusCode == 200){
          //this.PieData.series = res.data.data;
          
          for (let i in res.data.data) {
            this.PieData.series.push([{name: '', data: ''}]);
            this.PieData.series[i].name = res.data.data[i].name;
            this.PieData.series[i].data = res.data.data[i].value;
          }
          //console.log(this.PieData.series)
          this.showPie('canvasPie', this.PieData);
        }else{
          this.msg = '未知错误';
          this.togglePopup('middle');
        }
        
      }
    });
    
    
  },
  created() {
    this.getFinishExamList();
    this.getSenicResult();
  },
  methods: {
    getFinishExamList: function(){
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/result/GetFinishExamList', 
        data: {
          limit: "10000",
          page: "1"
        },
        success: res => {
          //console.log(res);
          if(res.data.state == "success"){
            this.finishExamList = res.data.data.examList;
            for (let i in this.finishExamList) {
            	this.finishExamList[i].dateOne = this.finishExamList[i].date.substr(0,10);
              this.finishExamList[i].dateTwo = this.finishExamList[i].date.substr(11);
            }
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    getSenicResult: function(){
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/result/GetUserSenicResult', 
        data: {
          
        },
        success: res => {
          //console.log(res);
          if(res.data.state == "success"){
            this.liveList = res.data.data;
            for (let i in this.liveList) {
            	this.liveList[i].dateOne = this.liveList[i].ExamTime.substr(0,10);
              this.liveList[i].dateTwo = this.liveList[i].ExamTime.substr(11);
            }
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    showLive: function(path){
      
    },
    onClickItem(index) {
      if (this.current !== index) {
        this.current = index;
      }
    },
    showPie(canvasId,chartData){
    	new wxCharts({
    		canvasId: canvasId,
    		type: 'pie',
    		fontSize:11,
    		legend:true,
    		background:'#FFFFFF',
    		pixelRatio:_self.pixelRatio,
    		series: chartData.series,
    		animation: true,
    		width: _self.cWidth*_self.pixelRatio,
    		height: _self.cHeight*_self.pixelRatio,
    		dataLabel: true,
    	   });
    },
    changeData() {
      //这里只做了柱状图数据动态更新，其他图表同理。
      canvaColumn.updateData({
        series: Data.ColumnB.series,
        categories: Data.ColumnB.categories
      });
    }
  }
};
</script>

<style scoped>

.charts {
  width: 750upx;
  padding-top: 200upx;
  height: 500upx;
  background-color: #ffffff;
}
.line {
  height: 15upx;
  background-color: #f2f2f2;
}
.uni-padding-wrap {
  background-color: #fff;
}
.segmented-control {
  width: 100% !important;
}
.segmented-control-item {
  line-height: 40px !important;
}
.content {
  background-color: #fff;
  overflow: hidden;
}
.chartstitle{
  height: 80upx;
  font-size: 42upx;
  font-weight: bold;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listab{
  width: 700upx;
  margin: 30upx auto;
  border: 1upx solid #f2f2f2;
}
.list{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border-bottom: 1px solid #f2f2f2;
  color: #333333;
  height: 90upx;
}
.listhead{
  height: 64upx;
  background-color: #F2F2F2;
}
.listname{
  display: flex;
  width: 370upx;
  font-size: 18upx;
  justify-content: center;
  align-items: center;
}
.listnames{
  display: flex;
  width: 330upx;
  font-size: 18upx;
  justify-content: center;
  align-items: center;
}
.listtime{
  display: flex;
  width: 170upx;
  font-size: 18upx;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.listscore{
  display: flex;
  width: 150upx;
  font-size: 18upx;
  justify-content: center;
  align-items: center;
}
.listscores{
  display: flex;
  width: 110upx;
  font-size: 18upx;
  justify-content: center;
  align-items: center;
}
.listtool{
  display: flex;
  width: 90upx;
  font-size: 18upx;
  justify-content: center;
  align-items: center;
}
.listtool button{
  width: 72upx;
  height: 38upx;
  line-height: 38upx;
  background-color: #ffffff;
	border-radius: 5px;
	border: solid 1px #dddddd;
  border: none;
  font-size: 18upx;
  padding: 0;
}

</style>
